<template>
  <el-dialog
      :title="modalConfig.title"
      v-model="modalConfig.visible"
      width="40%"
      :close-on-click-modal="false"
  >
    <el-form
        size="medium"
        style="min-height: 200px"
        label-width="100px"
        label-position="top"
    >
      <el-row :gutter="20">
        <el-col :span="24">
          <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
          >
            <div class="avatar-upload-wrap">
              <el-avatar
                  :size="100"
                  style="margin-bottom: 30px"
                  src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
              >
              </el-avatar>
              <div class="uploader-bottom">
                <i class="icon-upload el-icon-camera"></i>
              </div>
            </div>
          </el-upload>
        </el-col>
        <el-col :span="12">
          <el-form-item label="用户名：">
            <el-input
                size="medium"
                v-model="data.form.name"
                placeholder="请输入用户名"
                clearable
                :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="驾驶证：">
            <el-input
                v-model="data.form.licenseNumber"
                placeholder="请输入驾驶证号"
                size="medium"
                :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="电话号码：">
            <el-input
                v-model="data.form.phone"
                placeholder="请输入电话号码"
                size="medium"
                :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="司机状态：">
            <el-select
                v-model="data.form.status"
                placeholder="请选择司机状态"
                size="medium"
                :style="{ width: '100%' }"
            >
              <el-option
                  v-for="item in WorkingStatusOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template v-slot:footer class="dialog-footer">
      <el-button @click="onModalCloseClick" size="medium">取 消</el-button>
      <el-button
          type="primary"
          @click="onModalConfirmClick"
          size="medium"
          :loading="modalConfig.confirmBtnLoading"
      >确 定</el-button
      >
    </template>
  </el-dialog>
</template>

<script>
import { computed, reactive } from "vue";   //引入vue的响应式
import { useStore } from "vuex";  //引入vuex的store
import { userTypeOptions, sexOptions ,driverWorkStatusOptions} from "@/others/options.js";  //引入用户类型和性别选项



export default {   //导出组件
  name: "DriverEdit",  //组件名称
  emits: ["confirm"],  //定义组件可以触发的事件
  setup(props, context) {                       //setup函数,这个大括号包括了很多
    const store = useStore();  //获取store
    //模态框配置
    const modalConfig = reactive({  //reactive函数
      type: "", // "add" "edit"   //模态框类型
      title: "",  //模态框标题
      visible: false, //模态框是否可见
      confirmBtnLoading: false,  //确认按钮是否加载中
    });

    //初始化表单
    const getDefaultForm = () => {  //定义一个函数
      return {
        name: "",
        licenseNumber: "",
        phone: "",
        status: "",
      };
    };

    const data = reactive({ form: getDefaultForm() });  //定义一个响应式对象,data中包含一个form属性,form属性是一个函数getDefaultForm()的返回值

    //初始化模态框
    const initModal = () => {  //定义一个函数
      data.form = getDefaultForm();  //将data.form设置为getDefaultForm()的返回值
    };

    //显示模态框
    const showModal = (  //定义一个函数
        options = {   // options是一个对象,包含type,title,data三个属性
          type: "add",
          title: "",
          data: {},
        }
    ) => {   //函数体
      modalConfig.type = options.type;
      modalConfig.visible = true;
      if (options.type === "add") modalConfig.title = "添加";
      if (options.type === "edit") modalConfig.title = "编辑";
      modalConfig.title = options.title || "";
      console.log("options", options);
      if (options.data) data.form = { ...options.data };
    };

    //隐藏模态框
    const hideModal = () => {  //定义一个函数
      modalConfig.visible = false;  //将modalConfig.visible设置为false
      initModal();    //调用initModal()函数
    };

    //点击关闭按钮
    const onModalCloseClick = () => {
      hideModal();
    };

    //点击确认按钮
    const onModalConfirmClick = () => {
      hideModal();
      // driverAdd.setParams(data.form);
      context.emit("confirm");

    };

    return {   //返回一个对象
      modalConfig,
      data,
      sexOptions: sexOptions,
      roleOptions: userTypeOptions,
      WorkingStatusOptions:driverWorkStatusOptions,

      hideModal,
      showModal,
      onModalConfirmClick,
      onModalCloseClick,
    };
  },
};
</script>

<style lang="scss" scoped>
.avatar-uploader {
  margin-bottom: 30px;
  text-align: center;
  .avatar-upload-wrap {
    position: relative;
    height: 100px;
    border-radius: 100%;
    overflow: hidden;

    .uploader-bottom {
      width: 100%;
      padding: 4px 0;
      background: rgba(#000, 0.4);
      position: absolute;
      z-index: 99;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      text-align: center;
      .icon-upload {
        font-size: 16px;
        color: #fff;
      }
    }
  }
}
</style>